<template>
	<scroll-view class="product-scroll" scroll-y="true" @scrolltolower="toLoadMore">
		<view class="product-item" v-for="(item, index) in goodsList" @click.stop="handleItem(item.id)" :key="index"
			:style="[goodsItemSpace]">
			<view class="product-pic">
				<image lazy-load :src="item.cover_pic" mode="aspectFill" />
				<goodsSaleNo v-if="item.product_type != 7" :imgHeight="'32.669vw'" :goodsInfo="item"
					:imgMode="'heightFix'"></goodsSaleNo>
				<view class="product-take_price" v-if="item.take_price > 0">可使用联盟券: ¥{{ item.take_price }}</view>
				<view class="product-take_price" style="bottom: 90rpx" v-if="item.send_price > 0">可获得联盟券: ¥{{ item.send_price }}</view>
			</view>
			<view class="goods-info">
				<view class="goods-title" :style="{ color: propsData.params.producNameColor }">{{ item.name }}</view>
				<view class="goods-seckill1" v-if="item.delivery_rules&& typeGroup!=1">
					{{ item.delivery_rules.times }}
				</view>
				<view class="df" v-if="typeGroup==1">
					<view class="goods-seckill">
						<view
							style="background-color: #FE4D3A; border-radius: 0px 0px 6px 0px;padding-right:3px;padding-left:1px;font-weight: 500;font-size: 10px;">
							{{item.status.status==1?'距结束':'距开始'}}
						</view>
						<view
							style="padding-left:6px; padding-right:3px; background-color: #FFEEEE;border-radius: 6px 0px 0px 0px; color:#F0250E;font-weight: 500;font-size: 10px;">
							<!-- {{item.status.time}} -->
							{{ formatCountdown(item.status.time) }}
						</view>
					</view>
					<view style="margin-left:3px;font-size: 12px;color: #FF5C26;font-weight: 400;" v-if="item.delivery_rules">
						{{ item.delivery_rules.times}}
					</view>
				</view>

				<view class="info-down">
					<view class="price-box">
						<view class="price" :style="{ color: propsData.params.priceColor }">
							<view>￥</view>
							<view>{{ item.price | priceBeforeZero }}</view>
							<view>{{ item.price | priceAfterZero }}</view>
						</view>
						<view class="origin-price" v-if="showPrice"
							:style="{ color: propsData.params.originPriceColor }">
							￥{{ item.original_price || item.price }}</view>
					</view>
					<view class="goods-sales" :style="{ color: propsData.params.saleColor }" v-if="showSales">
						{{ $t("list.sold") + " " + item.virtual_sales }}
					</view>
					<view class="buy-btn" v-if="
              showBuyBtn && (item.product_type == 0 || item.product_type == 4)
            ">
						<!-- <view v-if="item.cart_info.cart_num>0" class="minusIcon" @click.stop="minusClick(item)">
							<u-icon size="25rpx" name="minus" color="#FFF"></u-icon>
						</view> -->
					<!-- 	<view class="ml10" v-if="item.cart_info.cart_num>0">
							{{item.cart_info.cart_num}}
						</view> -->
						<view class="ml10">
							<buyBtn @handleBuy="buyBtn(item)" :propsData="propsData"> </buyBtn>
						</view>
					</view>
				</view>
			</view>

		</view>
	</scroll-view>
</template>

<script>
	import {
		diyMixin
	} from "../../mixins/diy";
	import buyBtn from "../components/buyBtn.vue";
	import goodsSaleNo from "@/components/goodsSaleNo/index.vue";

	export default {
		props: {
			propsData: {
				type: Object,
				default: () => {
					return {};
				},
			},
			goodsList: {
				type: Array,
				default: [],
			},
			goodsItemSpace: {
				type: Object,
				default: {},
			},
			typeGroup: {
				type: Number,
			},
		},
		mixins: [diyMixin], //混入文件
		data() {
			return {
				timers: [], // 存储定时器
				num: 0,
			};
		},
		components: {
			buyBtn,
			goodsSaleNo,
		},
		mounted() {
			if (this.typeGroup === 1) {
				this.goodsList.forEach((item, index) => {
					if (this.goodsList[index].status.time) {
						let timer = setInterval(() => {
							// 在定时器的闭包中使用局部变量 item 和 index，确保每个定时器操作的是对应的商品对象
							this.$set(this.goodsList[index].status, 'time', this.goodsList[index].status
								.time -
								1);
						}, 1000);
						// 将定时器存储起来，以便在组件销毁时清除
						this.timers.push(timer);
					} else {
						return
					}
				});
			}
		},
		beforeDestroy() {
			this.timers.forEach(timer => clearInterval(timer));
		},


		computed: {
			showBuyBtn() {
				return this.propsData.params.showBuyBtn;
			},
			showPrice() {
				return this.propsData.params.showPrice;
			},
			showSales() {
				return this.propsData.params.showSales;
			},
		},

		methods: {
			formatCountdown(seconds) {
				if (seconds <= 0 || !seconds) {
					return '0';
				}
				let hours = Math.floor(seconds / 3600);
				let minutes = Math.floor((seconds % 3600) / 60);
				let remainingSeconds = seconds % 60;
				return `${hours}小时 ${minutes}分钟 ${remainingSeconds}秒`;
			},
			buyBtn(item) {
				this.$emit("clickBuyBtn", {
					item
				});
			},
			handleItem(id) {
				this.$emit("toGoodDetail", {
					id
				});
			},
			toLoadMore() {
				this.$emit("scrollToEnd");
			},
		},
	};
</script>

<style scoped lang="scss">
	.ml10 {
		margin-left: 10rpx;
	}

	.minusIcon {
		width: 48rpx;
		height: 48rpx;
		background: #fa2c1b;
		border-radius: 16rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.product-scroll {
		width: 100%;
		// max-height: 133.87vw;
		overflow: hidden;
		padding: 0 3.2%;

		.product-item {
			width: 100%;
			// margin-bottom: 3.2vw;
			background-color: #ffffff;
			border-radius: 1.34vw;

			.product-pic {
				width: 100%;
				height: 93.6vw;
				border-radius: 1.34vw 1.34vw 0 0;
				overflow: hidden;
				position: relative;

				image {
					width: 100%;
					height: 100%;
					display: block;
				}
				.product-take_price {
					position: absolute;
					display: inline-block;
					background-color: rgba(0, 0, 0, 0.5);
					border-radius: 0 20rpx 20rpx 0;
					padding: 3rpx 10rpx;
					color: #fff;
					font-size: 24rpx;
					bottom: 40rpx;
				}
			}

			.goods-info {
				width: 100%;
				padding: 10rpx;
				display: flex;
				flex-direction: column;
				margin: 0 auto;
				background-color: #ffffff;
				border-radius: 0 0 1.34vw 1.34vw;
				overflow: hidden;
				padding-top: 1.067vw;

				.goods-title {
					width: 91.73%;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 600;
					color: rgba(29, 29, 29, 0.94);
					word-break: break-all;
				}

				.info-down {
					width: 91.73%;
					position: relative;
					margin-top: 2.134vw;

					// margin-bottom: 3.2vw;
					.price-box {
						display: flex;
						align-items: flex-end;

						.price {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 600;
							line-height: 1;
							color: #fa2c1b;
							display: flex;
							align-items: flex-end;

							view:nth-child(2) {
								font-size: 38rpx;
							}
						}

						.origin-price {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #9b9b9b;
							display: inline-block;
							text-decoration: line-through;
							margin-left: 1.67vw;
						}
					}

					.goods-sales {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #9b9b9b;
						margin-top: 2.134vw;
					}

					.buy-btn {
						position: absolute;
						right: 0;
						bottom: 0;
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
			}
		}

		.product-item:last-child {
			margin-bottom: 0;
		}
	}

	.df {
		display: flex;
		align-items: center;
		margin-top: 10rpx;
		justify-content: flex-start;
	}

	.goods-seckill {
		display: flex;
		align-items: center;
		background: linear-gradient(#FD362E 0%, pink);
		border-radius: 7rpx;
		font-size: 24rpx;
		overflow: hidden;
		color: white;
	}

	.goods-seckill1 {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		overflow: hidden;
		color: #FD362E;
		margin-top: 10rpx;
	}
</style>